<template>
	<view class="start5">
		<view class="con">
			<!-- <view class="text1"> 现在开始真人认证 </view>
            <view class="text2"> 请发送三张照片给我们吧～ </view>
            <view class="imglistbox" v-if="images.length > 0">
                <view class="imglist" >
                    <view class="item_box" v-for="(item,index) in images">
                        <image :src="item" mode="aspectFill"  />
                        <view class="del_con" @click="delImg(index)">
                            <uni-icons type="closeempty" color="#fff" size="16" ></uni-icons>
                        </view>
                    </view>
                   
                </view>
            </view>
            <view class="btn btn6" v-if="images.length != 3" @click="selectImg" >上传照片</view> -->

			<view class="text3">
				请录制一段超过5-30秒的视频向雪遇的用户们介绍下自己～
			</view>
			<view class="video_box" v-if="videoUrl">
				<view class="del_con" @click="videoUrl = ''">
					<uni-icons type="closeempty" color="#fff" size="16"></uni-icons>
				</view>
				<video :src="videoUrl" :poster="videoUrl+'?x-oss-process=video/snapshot,t_1,m_fast,ar_auto'"></video>
			</view>
			<view class="btn btn6" @click="selectVideo" v-if="!videoUrl">上传视频</view>
			<view class="btn3" v-if="videoUrl" @click="sub">
				确认
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				localList: [],
				images: [],
				videoUrl: ""
			};
		},
		methods: {
			delImg(index) {
				console.log(index);
				this.images.splice(index, 1);
			},
			sub() {

				this.$api.post('Member/PeopleVideo', {
					VideoUrl: this.videoUrl
				});

				this.nav_to('/pages/tab/my')
			},
			async uploadingList(url, tempKey, timeStamp) {
				this.$pv.load('正在上传');
				let r = await this.$api.upload(
					"/Album/Upload", { path: url },
					(pro) => {
						this.localList.forEach((item) => {
							console.log(pro)
							if (item.tempKey == tempKey) {
								item.pro = pro;
							}
						});
					}
				);
				this.$pv.closeLoad('')
				return r;
			},
			selectImg(index) {
				let ind = index >= 0 ? index : -1;
				let _this = this;
				let con;
				let mediaType = ['image'];
				// 首次选择
				console.log(ind, this.localList.length)
				con = 3 - this.images.length;
				console.log(con, "----------------------look")
				uni.chooseMedia({
					count: con,
					mediaType: mediaType,
					sourceType: ['album', 'camera'],
					maxDuration: 30,
					camera: 'back',
					success(res) {
						res.tempFiles.forEach(async (item, index) => {
							let o;
							if (item.fileType === "image") {
								o = {
									ID: "",
									duration: 0,
									fileType: item.fileType,
									tempUrl: item.tempFilePath,
									flieUrl: item.tempFilePath,
									tempKey: uni.$u.guid(8),
									pro: 0,
									netPath: "",
								};
							} else {
								o = {
									ID: "",
									duration: item.duration,
									fileType: item.fileType,
									tempUrl: item.thumbTempFilePath,
									// item.
									flieUrl: item.tempFilePath,
									tempKey: uni.$u.guid(8),
									pro: 0,
									netPath: "",
								};
								uni.getImageInfo({
									src: item.thumbTempFilePath,
									success: function(image) {
										console.log(
											"封面信息:W" +
											image.width +
											"H" +
											image.height
										);
										let max = 560;
										if (image.height > image.width) {
											_this.vHight = max;
											_this.vWidth =
												max * (image.width / image.height);
										} else {
											max = 600;
											_this.vWidth = max;
											_this.vHight =
												max * (image.height / image.width);
										}
									},
								});
							}
							if (ind == -1) {
								_this.localList.push(o);
							} else {
								_this.localList.splice(ind, 1, o);
							}
							setTimeout(async () => {
								let r = await _this.uploadingList(o.flieUrl, o.tempKey, new Date().getTime() - index *
									500);
								console.log(r)
								_this.images.push(r);
							}, index * 150)

						});
					}
				})
			},
			selectVideo() {
				let _this = this;
				uni.chooseMedia({
					count: 1,
					mediaType: ['video'],
					sourceType: ['album', 'camera'],
					maxDuration: 30,
					camera: 'front',
					success(res) {
						res.tempFiles.forEach(async (item, index) => {
							setTimeout(async () => {
								_this.$pv.load('上传中');
								let r = await _this.uploadingList(item.tempFilePath, '1111111', new Date().getTime() -
									index * 500);
								_this.videoUrl = r;
								console.log(r, '----------------fuck')
							}, index * 150)

						});
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #fff;
		height: 100vh;
		width: 100vw;
	}

	.start5 {
		display: flex;
		min-height: 100vh;
		align-items: center;

		.con {
			width: 100%;
			box-sizing: border-box;
			padding-left: 80rpx;
			padding-right: 80rpx;
		}

		.text1 {
			font-size: 64rpx;
			color: #0a0a0a;
		}

		.text2 {
			margin-top: 32rpx;
			font-size: 40rpx;
			color: #9d9d9d;
		}

		.imglistbox {
			margin-top: 80rpx;
			width: 590rpx;
			// height: 316rpx;
			background: #0c0c0c;
			border-radius: 16rpx;
			padding: 24rpx;
			box-sizing: border-box;

			.imglist {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 542rpx;
				flex-wrap: wrap;

				&::after {
					content: "";
					height: 1px;
					width: 33%;
					display: flex;
				}
			}

			.item_box {
				position: relative;
				height: 172rpx;
				width: 172rpx;
			}

			image {
				width: 172rpx;
				height: 172rpx;
				// background: #0f0;
			}
		}

		.btn1 {
			margin-top: 16rpx;
			width: 544rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #ffffff;
			border-radius: 12rpx;
			color: #9d9d9d;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.text3 {
			margin-top: 48rpx;
			color: #9d9d9d;
			font-size: 40rpx;
			line-height: 56rpx;
		}

		.video_box {
			position: relative;
			margin-top: 38rpx;
			;
			width: 590rpx;
			height: 360rpx;

			video {
				width: 590rpx;
				height: 360rpx;
			}
		}

		.btn3 {
			margin-top: 64rpx;
			width: 590rpx;
			height: 96rpx;
			background: linear-gradient(225deg, #020202 0%, #363636 100%);
			box-shadow: 0px 8px 20px 0px rgba(46, 46, 46, 0.4);
			display: flex;
			border-radius: 12rpx;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 36rpx;
		}

		.del_con {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 50;
			background: rgba(0, 0, 0, 0.4);
			height: 40rpx;
			width: 40rpx;
			text-align: center;
			line-height: 40rpx;
			border-radius: 0 16rpx 0 16rpx;
		}
	}

	.btn6 {
		margin-top: 64rpx;
		width: 590rpx;
		height: 96rpx;
		background: linear-gradient(225deg, #020202 0%, #363636 100%);
		box-shadow: 0px 8px 20px 0px rgba(46, 46, 46, 0.4);
		display: flex;
		border-radius: 12rpx;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 36rpx;
	}
</style>